<template>
  <div class="container">
    <div class="header">
      <van-dropdown-menu>
        <van-dropdown-item
          @change="changeValue1(value1)"
          v-model="value1"
          :options="option1"
        />
        <van-dropdown-item v-model="value2" :options="option2" />
        <van-dropdown-item v-model="value3" :options="option3" />
      </van-dropdown-menu>
    </div>
    <div class="dsesginer" v-for="(item, index) in 10" :key="index">
      <div class="profile">
        <img
          src="https://xystcdn.xydec.com.cn/upload/1704/201704071613500995860.jpg"
          alt=""
        />
      </div>
      <div class="content">
        <div class="nameContainer">
          <span>岳帅</span>
          <span>总设计师</span>
          <van-button
            type="danger"
            size="mini
          "
            class="btn"
            >点击预约</van-button
          >
        </div>
        <div class="introduce">
          <span>擅长风格:简约,简欧,中式</span>
          <span>所属公司:苏州</span>
          <span>设计作品:5套</span>
          <van-button
            type="danger"
            size="mini
          "
            class="btn2"
            plain
            hairline
            >查看作品</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      value3: 'a',
      option1: [
        { text: '全国', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '设计级别', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      option3: [
        { text: '擅长风格', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
    }
  },
  mounted() {
    console.log(this.value3)
  },
  methods: {
    changeValue1(val) {
      console.log('值变化了', val)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  margin-top: 50px;
  margin-bottom: 50px;
  .dsesginer {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
    .profile {
      width: 100px;
      height: 100px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .content {
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .nameContainer {
        span:nth-child(1) {
          font-size: 22px;
        }
        .btn {
          margin-left: 40px;
          position: relative;
          top: -5px;
        }
      }
      .introduce {
        display: flex;
        flex-direction: column;
        text-align: left;
        position: relative;
        .btn2 {
          position: absolute;
          bottom: 0px;
          right: -73px;
          width: 97.96px;
        }
      }
    }
  }
}
</style>
